import { useState } from 'react';
import {
  View,
  Text,
  StyleSheet,
  Image,
  TextInput,
  TouchableOpacity,
} from 'react-native';
import { useNavigation } from '@react-navigation/native';
export default () => {
  const [bol, setBol] = useState(true);
  const navigation = useNavigation();
  return (
    <View style={styles.container}>
      <View style={styles.top}>
        <TouchableOpacity onPress={() => navigation.goBack()}>
          <Image
            style={styles.tinyLogo}
            source={{
              uri: 'https://pic.616pic.com/ys_img/00/86/87/ZM8bzFeq2T.jpg',
            }}
          />
        </TouchableOpacity>
        <View style={styles.ipt}>
          <Image
            style={styles.tinyLogo2}
            source={{
              uri: 'https://pic.mksucai.com/00/21/19/714037dd49929907.webp',
            }}
          />
          <TextInput placeholder="一元拍卖" />
        </View>
        <Text style={styles.sousuo}>搜索</Text>
      </View>
      <View style={styles.how}>
        <Text style={styles.howsousuo}>热门搜索</Text>
        <Text style={styles.howyc} onPress={() => setBol(!bol)}>
          隐藏
        </Text>
      </View>
      <View style={styles.bot}>
        {bol &&
          '12345678912'.split('').map((item, index) => {
            return (
              <Text style={styles.num} key={index}>
                {Math.floor(Math.random() * (100000 - 100 + 1)) + 100}
              </Text>
            );
          })}
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#ffffff',
  },
  top: {
    marginTop: 30,
    flexDirection: 'row',
    height: 40,
    alignItems: 'center',
  },
  tinyLogo: {
    width: 20,
    height: 20,
    marginLeft: 10,
    marginRight: 10,
  },
  ipt: {
    flex: 1,
    flexDirection: 'row',
    backgroundColor: '#f6f6f6',
    borderRadius: 20,
    height: 40,
    alignItems: 'center',
  },
  tinyLogo2: {
    width: 20,
    height: 20,
    marginLeft: 10,
    marginRight: 10,
    // marginTop: 10,
  },
  sousuo: {
    width: 50,
    height: 30,
    flexDirection: 'row',
    marginLeft: 10,
    marginRight: 10,
    borderRadius: 5,
    backgroundColor: '#fb0102',
    color: '#fff',
    textAlign: 'center', // 文字水平居中
    textAlignVertical: 'center', // 文字垂直居中
  },
  how: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    marginTop: 20,
    marginLeft: 10,
    marginRight: 10,
  },
  howsousuo: {
    fontWeight: 700,
  },
  howyc: {
    color: '#ccc',
  },
  bot: {
    flex: 1,
    flexDirection: 'row',
    marginTop: 20,
    flexWrap: 'wrap',
  },
  num: {
    backgroundColor: '#f0f1f3',
    margin: 10,
    padding: 5,
  },
});
